var RIGHTDOM = `
<div class='dis-spa account-hea-top'>

    <!-- 充值 -->
    <div id='mask-hea' v-if='heaMask'></div>
    <transition enter-active-class='animated bounceIn'>
        <div id='mask-1-hea' v-if='heaMask'>
            <div class='mask-con-hea'>
                <div class='dis-spa edit-tit-hea'>
                    <span style="opacity:0;">1</span>
                    <span v-text='tit'>充值</span>
                    <img class='hover' @click='heaMask=false;' src="./img/close.svg" style="width:22px;height:22px;">
                </div>
                <div class='mask-con-wrap-hea'>
                    <div class='dis-cen'>
                        <div class='dis-cen change-type'>
                            <span :class="{'hover':true,'pay-type-active':conType=='zhifubao'}" @click="conType='zhifubao'">支付宝</span>
                            <span :class="{'hover':true,'pay-type-active':conType=='yinhang'}" @click="conType='yinhang'">银行卡</span>
                        </div>
                    </div>
                    
                <div v-if="conCen=='rechZhi'" class='dis-spa rech-zhi'>
                        <img src='./img/qr.jpg' style='width:150px;height:150px'/>
                        <p>打开支付宝扫描此二维码</p>
                </div>

                <div v-if="conCen=='rechYin'">
                        <div class='rech-back'>
                            <p class='hover' @click="conCen='rechMon'">
                                <span>银行卡1</span>
                                <span>231352*********12155</span>
                                <span>(中国工商银行)</span>
                            </p>
                            <p class='hover'>
                                <span>银行卡1</span>
                                <span>231352*********12155</span>
                                <span>(中国工商银行)</span>
                            </p>
                            <p class='hover'>
                                <span>银行卡1</span>
                                <span>231352*********12155</span>
                                <span>(中国工商银行)</span>
                            </p>
                            <p class='hover'>
                                <span>银行卡1</span>
                                <span>231352*********12155</span>
                                <span>(中国工商银行)</span>
                            </p>
                        </div>
                </div>

                <div v-if='conCen=="rechMon"' class='rech-money'>
                        <h2>12454241*****41534153412112</h2>
                        <p>（中国工商银行）</p>
                        <input  type='text' placeholder='充值金额（元）'/>
                        <div class='dis-spa'>
                            <button @click="conCen='rechYin'">返回选卡</button>
                            <button @click="conCen='rechSure'">下一步</button>
                        </div>
                </div>

                <div v-if='conCen=="rechSure"' class='rech-money'>
                        <h2>12454241*****41534153412112</h2>
                        <p>（中国工商银行）</p>
                        <h5>充值<span>1200.00</span>元</h5>
                        <input  type='text' placeholder='请输入交易密码'/>
                        <div class='dis-spa'>
                            <button @click="conCen='rechMon'">上一步</button>
                            <button>确认充值</button>
                        </div>
                    </div>

                <div v-if="conCen=='nobind'" class='dis-spa no-bind'>
                        <h2>暂无绑定</h2>
                        <button class='hover' @click='bind'>立即绑定</button>
                    </div>
                </div>
            </div>
        </div>
    </transition>
    <!-- 充值 -->

    <!-- 绑定支付宝账号 -->
    <div id='mask-alipy' v-if="bindOff=='alipy'"></div>
    <transition enter-active-class='animated bounceIn' leave-active-class='animated bounceOut'>
        <div id='mask-1-alipy' v-if="bindOff=='alipy'">
            <div class='mask-con-alipy'>
                <div class='dis-spa edit-tit-alipy'>
                    <span style="opacity:0;">1</span>
                    <span>更换绑定支付宝</span>
                    <img class='hover' @click='bindOff=false' src="./img/close.svg" style="width:22px;height:22px;">
                </div>
                <!-- @click="$('.qr-sweep-succ').show();"  这段代码是扫码成功执行-->
                <div class='mask-con-wrap-alipy'>
                    <div class='qr-like-alipy'>
                        <img src="./img/qr.jpg" style="width:300px;height:300px;">
                        <div class='qr-sweep-succ-alipy'>
                            <div>
                                <h4>扫码成功</h4>
                                <p>请在支付宝确认绑定</p>
                            </div>
                        </div>
                    </div>
                    <p class='zhifu-qr-noti-alipy'>打开支付宝扫描此二维码</p>
                </div>
            </div>
        </div>
    </transition>
    <!-- 绑定支付宝账号 -->

    <!-- 绑定银行卡账号 -->
    <div id='mask-bank1' v-if="bindOff=='bank1'||bindOff=='bank2'"></div>
    <transition enter-active-class='animated bounceIn'>
        <div id='mask-1-bank1' v-if="bindOff=='bank1'">
            <div class='mask-con'>
                <div class='dis-spa edit-tit-bank1'>
                    <span style="opacity:0;">1</span>
                    <span>绑定银行卡</span>
                    <img class='hover' @click='bindOff=false;' src="./img/close.svg" style="width:22px;height:22px;">
                </div>
                <div class='mask-con-wrap-bank1'>
                    <div class='edit-input-bank1'>
                        <input type="text" placeholder="真实姓名">
                    </div>
                    <div class='mask-select-bank1'>
                        <el-select style="width:100%;" v-model="seleCerType" placeholder="证件类型">
                            <el-option key="1" label="身份证" value="身份证">
                            </el-option>
                            <el-option key="2" label="驾驶证" value="驾驶证">
                            </el-option>
                        </el-select>
                    </div>
                    <div class='edit-input-bank1'>
                        <input type="text" placeholder="证件号码">
                    </div>
                    <p class='edit-noti-bank1'>这里是一条提示内容</p>
                    <div class='edit-sure-bank1'>
                        <button class='hover' @click="bindOff='bank2'">下一步</button>
                    </div>
                </div>
            </div>
        </div>
    </transition>

    <transition enter-active-class='animated bounceIn'>
        <div id='mask-1' v-if="bindOff=='bank2'">
            <div class='mask-con'>
                <div class='dis-spa edit-tit-bank1'>
                    <span style="opacity:0;">1</span>
                    <span>绑定银行卡</span>
                    <img class='hover' @click="bindOff=false;" src="./img/close.svg" style="width:22px;height:22px;">
                </div>
                <div class='mask-con-wrap-bank1'>
                    <div class='edit-input-bank1'>
                        <input type="text" placeholder="银行卡号">
                    </div>
                    <div class='mask-select-bank1'>
                        <el-select style="width:100%;" v-model="seleCard" placeholder="选择银行卡">
                            <el-option key="1" label="中国银行" value="中国银行">
                            </el-option>
                            <el-option key="2" label="工商银行" value="工商银行">
                            </el-option>
                        </el-select>
                    </div>
                    <div class='mask-select-bank1' style='margin-top: 10px;'>
                        <el-select style="width:100%;" v-model="seleCardType" placeholder="选择银行卡类型">
                            <el-option key="1" label="储蓄卡" value="储蓄卡">
                            </el-option>
                            <el-option key="2" label="借记卡" value="借记卡">
                            </el-option>
                        </el-select>
                    </div>
                    <div class='dis-spa edit-invi-code-bank2'>
                        <input type="text" placeholder="预留手机号">
                        <span class='hover'>获取验证码</span>
                    </div>
                    <div class='edit-input-bank1'>
                        <input type="text" placeholder="验证码">
                    </div>
                    <p class='edit-noti-bank1'>这里是一条提示内容</p>
                    <div class='dis-spa bind-card-2-bank2'>
                        <button class='hover' @click="bindOff='bank1'">上一步</button>
                        <button>确认绑定</button>
                    </div>
                </div>
            </div>
        </div>
    </transition>
    <!-- 绑定银行卡账号 -->

    <div class='dis-start rech-tixian-a'>
        <p><span>账户余额：</span><span>￥169.561</span></p>
        <a href="#" @click='rech("充值")'>充值</a>
        <a href="#" @click='rech("提现")'>提现</a>
    </div>
    <a href="#">退出</a>
</div>
`;
Vue.component('right-top', {
    data: function() {
        return {
            //弹窗控制
            heaMask: false,
            //充值/提现（tit）
            tit: '充值',
            //支付宝或者银行卡选择  zhifubao:支付宝  yinhang:银行卡
            conType: 'zhifubao',
            //弹窗内容控制 nobind:没绑定支付宝或银行卡  rechZhi:充值支付宝  rechYin:充值银行卡(选择)  rechMon:充值银行卡(输入金额)  rechSure:充值银行卡（输入交易密码）
            conCen: 'nobind',
            //绑定支付宝/银行卡  alipy:绑定支付宝    bank1：绑定银行卡第一步   bank2:绑定银行卡第二步
            bindOff: false,
            //证件类型  身份证等
            seleCerType: '',
            //选择的卡的银行  中国银行等
            seleCard: '',
            //卡的类型  储蓄卡/借记卡
            seleCardType: ''
        }
    },
    watch: {
        bindOff: function(val) {
            if (val != 'alipy') {
                this.replaceIcon();
            }
        }
    },
    methods: {
        //调充值
        rech: function(tit) {
            this.heaMask = true;
            this.tit = tit;
            if (tit == '充值') {
                this.conCen = 'nobind';
                // this.conCen = 'rechZhi';
                // this.conCen = 'rechYin';
                // this.conCen = 'rechMon';
                // this.conCen = 'rechSure';
            } else {
                //提现
                // this.conCen=
            }
        },
        //绑定支付宝/银行卡
        bind: function() {
            this.heaMask = false;
            if (this.conType == 'yinhang') {
                //绑定银行卡
                this.bindOff = 'bank1';
            } else {
                //绑定支付宝
                this.bindOff = 'alipy';
            }
        },
        //替换下拉框图标
        replaceIcon: function() {
            this.$nextTick(function() {
                var par = $('.el-input__suffix-inner');
                par.children().remove();
                par.append('<img src="./img/down.svg" style="opacity:.5;width:20px;height:20px">');
            });
        }
    },
    template: RIGHTDOM
});